import {getCommdityList} from '@/api/api' 

export default {
  namespaced:true,
  state: {
    commdityList:[],
    searchData:{
        keyword:'', 
        trademark:'',
        props:[],
        order:'2:desc',
        pageNo:'1',
        pageSize:'10'
      }
  },
  mutations: {
    // 供actions中的函数调用
    SET_COMMDITY_LIST(state,val){
      state.commdityList = val
    },

    // 返回首页，搜索时消除所有其他参数
    SEARCH_CLEAR(state,value){
      // 若是返回首页，则让分类参数 赋值undefined
      // 若是执行搜索，则不用操作分类参数 赋值undefined
      if (value === 'goHome') {
        state.searchData.categoryName = undefined
      }
      state.searchData = {
        ...state.searchData,
        //对象中是 属性:值
        // 不是 属性 = 值！！！
        category1Id:undefined,
        category2Id:undefined,
        category3Id:undefined,
        // categoryName:undefined,
        trademark:undefined,
        props:[]
      }
    },

    // search-index-使用---------------------
    // 检测路由改变后，重新赋值搜索参数
    CHANGE_SEARCHDATA(state,value){      
      const {params,query} = value
      state.searchData = {
        // 保留原始值
          ...state.searchData,
        //1.关键词搜索       
          ...params,
        //2.分类参数
          ...query
      }      
    },
    // 排序参数改变
    CHANGE_SORT(state,value){
      // 存储原本的 order，用于判断是否为，同一排序的二次点击
      const formerOrder = state.searchData.order

      // 改变排序的参数，但默认降序
      state.searchData.order = `${value}:desc`

      const currentOrder = state.searchData.order
      
      // 若是，则切换 升 降 序
      if(currentOrder === formerOrder){
        // 根据之前的 升降序 来切换 升降序
        const is = currentOrder.includes('desc')
        if(is){
          state.searchData.order = `${value}:asc`
        }else{
          state.searchData.order = `${value}:desc`
        }
      }
    },
    // 改变页码
    CHANGE_PAGE(state,value){
      state.searchData.pageNo = value;
    },

    //selector组件使用-----------------------------
    CHANGE_TRADEMARK(state,trademark){
      // 记住在vuex 中调用 state的数据 前缀是 state ！！ 不是this
      state.searchData.trademark = `${trademark.tmId}:${trademark.tmName}`      
    },
    CHANGE_PROPS(state,props){
      state.searchData.props.push(props)
    },

    // bread组件使用----面包屑标签关闭--------------
    CLOSE_BREAD(state,value){
      //  categoryName，keyword要处理路由信息,方法重载路由
      //  品牌正常处理
      //  属性处理对应数组的对应值
      switch(value){
        case 'categoryName':
          state.searchData.categoryName = undefined
          state.searchData.category1Id = undefined
          state.searchData.category2Id = undefined
          state.searchData.category3Id = undefined
          break;
        case 'keyword':
          state.searchData[value] = ''
          break;
        case 'trademark':          
          state.searchData[value] = ''
          break; 
        // 原本应该这样写的 case 'props':
        // 但是mutations的方法只能接收两个参数，一个默认，一个自定义
        // 此处的 属性出一个属性进来就是，故无法判断值，所以使用default
        default:
          if(state.searchData.props.includes(value)){
            // 删除需要不要的属性并重新赋值
            state.searchData.props = state.searchData.props.filter(item => item !== value)
          }
      }
    },

  },
  actions: {  
    async getSearch(context){
      const res = await getCommdityList(context.state.searchData)
      context.commit('SET_COMMDITY_LIST',res.data.data)
    },
  },
  getters:{
    // 商品列表
    goodsList: state =>state.commdityList.goodsList,
    // 品牌列表
    trademarkList: state =>state.commdityList.trademarkList,
    // 属性列表
    attrsList: state =>state.commdityList.attrsList,
  }
}
